<template>
	<div v-if="showCard" class="charge-container">
		<h2>积分充值</h2>
		<button class="close-button" @click="closePage()">×</button>
		<div class="charge-options">
			<div class="charge-option">
				<div class="discount-tag">OFF 50%</div>
				<h3>5元 = 50积分</h3>
				<p>原价10元，现价5元</p>
				<button class="charge-button">立即充值</button>
			</div>
			<div class="charge-option">
				<div class="discount-tag">OFF 60%</div>
				<h3>10元 = 100积分</h3> <!-- 改为更加平衡的积分值 -->
				<p>原价25元，现价10元</p>
				<button class="charge-button">立即充值</button>
			</div>
			<div class="charge-option">
				<div class="discount-tag">OFF 70%</div>
				<h3>50元 = 500积分</h3> <!-- 调整为500积分，更加对称 -->
				<p>原价150元，现价50元</p>
				<button class="charge-button">立即充值</button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				showCard: true,
			};
		},
		methods: {
			closePage() {
				this.$emit("close");
			},
		},
	};
</script>

<style>
	.charge-container {
		position: fixed;
		z-index: 1;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #fff;
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		width: 100%;
		max-width: 380px;
		/* 调整宽度更紧凑 */
		text-align: center;
		overflow: hidden;
		transition: transform 0.3s ease;
		/* 为整个容器添加动画 */
	}

	.charge-container:hover {
		transform: scale(1.02);
		/* 鼠标悬停时的轻微缩放效果 */
	}

	.charge-container h2 {
		color: #007bff;
		font-size: 1.8em;
		margin-bottom: 12px;
		/* 减少间距 */
		font-weight: bold;
	}

	.charge-options {
		max-height: 350px;
		overflow-y: auto;
		padding-right: 10px;
		/* 为滚动条留出一点空间 */
	}

	.charge-option {
		margin-bottom: 12px;
		/* 减小选项之间的间距 */
		padding: 15px;
		border-radius: 8px;
		background: #f9f9f9;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.3s ease;
		/* 添加平滑动画效果 */
		position: relative;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.charge-option:hover {
		transform: translateY(-5px) scale(1.03);
		/* 鼠标悬停时轻微上移并放大 */
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
		/* 增强悬停时的阴影效果 */
	}

	.charge-option h3 {
		font-size: 1.2em;
		/* 减小标题文字大小 */
		margin: 0;
		color: #333;
		margin-bottom: 5px;
	}

	.charge-option p {
		font-size: 0.9em;
		color: #666;
		margin: 3px 0 10px;
	}

	.discount-tag {
		background-color: #28a745;
		color: #fff;
		font-size: 0.8em;
		padding: 5px 10px;
		border-radius: 4px;
		position: absolute;
		top: 8px;
		right: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		animation: bounce 1s infinite;
		/* 标签添加轻微的弹跳效果 */
	}


	.charge-button {
		background-color: #007bff;
		color: #fff;
		font-size: 1em;
		padding: 10px 15px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		/* transition: background-color 0.3s ease, transform 0.2s ease; */
		margin-top: 8px;
		width: 100%;
	}

	.charge-container:hover {
		transform: translate(-50%, -50%) scale(1.02);
		/* Ensures it stays centered during scaling */
	}

	.close-button {
		position: absolute;
		top: 10px;
		right: 10px;
		background-color: transparent;
		border: none;
		font-size: 1.5em;
		color: #999;
		cursor: pointer;
		transition: color 0.3s ease;
	}

	.close-button:hover {
		color: #333;
		/* 鼠标悬停时改变颜色 */
	}
</style>